<%@ page contentType="text/html;charset=UTF8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<link rel="stylesheet" type="text/css" href="common/css/table.css" />
<title>表格样式</title>
	<script type="text/javascript">
		function add_event(tr){
			tr.onmouseover = function(){
				tr.className += ' hover';
			};
			tr.onmouseout = function(){
				tr.className = tr.className.replace(' hover', '');
			};
		}

		function stripe(table) {
			var trs = table.getElementsByTagName("tr");
			for(var i=1; i<trs.length; i++){
				var tr = trs[i];
				tr.className = i%2 != 0? 'odd' : 'even';
				add_event(tr);
			}
		}

		window.onload = function(){
			var tables = document.getElementsByTagName('table');
			for(var i=0; i<tables.length; i++){
				var table = tables[i];
				if(table.className == 'datagrid1' || table.className == 'datagrid2'
					|| table.className == 'datagrid3' || table.className == 'datagrid4'){
					stripe(tables[i]);
				}
			}
		}		
	</script>
</head>
<body>
	<!--控制总层-->
    <div style="width: 100%; height: 500px; margin-left:2%;margin-top: 20px;">
    	<!--展示表格1-->
        <div style="width: 95%;" >
            <table class="datagrid2">
            	<!--表格1标题-->
                <tr>
                    <th colspan="15">
                        <font style="font-size:25px; color:#800040">当 前 所 有 股 票 动 态</font>
                    </th>
                </tr>
                <tr>
                    <th>交易号</th>
                    <th>股票名称</th>
                    <th>股票代码</th>
                    <th>仓位类型</th>
                    <th>最新价</th>
                    <th>成交总量</th>
                    <th width="100px;">成交总金额</th>
                    <th>买价(多)</th>
                    <th>买价(空)</th>
                    <th>卖价</th>
                    <th>持仓量</th>
                    <th>盈亏</th>
                    <th>多开仓</th>
                    <th>空开仓</th>
                    <th>交易禁止</th>
                </tr>
                
                <tr>
                    <td>CBOT大豆</td>
                    <td>905.25</td>
                    <td>3.25</td>
                    <td>CBOT大豆</td>
                    <td>905.25</td>
                    <td>3.25</td>
                    <td>CBOT大豆</td>
                    <td>905.25</td>
                    <td>3.25</td>
                    <td>CBOT大豆</td>
                    <td>905.25</td>
                    <td>3.25</td>	
                    <td>CBOT大豆</td>
                    <td>905.25</td>
                    <td>3.25</td>	
                </tr>
                <tr>
                    <td>CBOT大豆</td>
                    <td>905.25</td>
                    <td>3.25</td>
                    <td>CBOT大豆</td>
                    <td>905.25</td>
                    <td>3.25</td>
                    <td>CBOT大豆</td>
                    <td>905.25</td>
                    <td>3.25</td>
                    <td>CBOT大豆</td>
                    <td>905.25</td>
                    <td>3.25</td>	
                    <td>CBOT大豆</td>
                    <td>905.25</td>
                    <td>3.25</td>	
                </tr>
                <tr>
                    <td>CBOT大豆</td>
                    <td>905.25</td>
                    <td>3.25</td>
                    <td>CBOT大豆</td>
                    <td>905.25</td>
                    <td>3.25</td>
                    <td>CBOT大豆</td>
                    <td>905.25</td>
                    <td>3.25</td>
                    <td>CBOT大豆</td>
                    <td>905.25</td>
                    <td>3.25</td>	
                    <td>CBOT大豆</td>
                    <td>905.25</td>
                    <td>3.25</td>	
                </tr>
                <tr>
                    <td>CBOT大豆</td>
                    <td>905.25</td>
                    <td>3.25</td>
                    <td>CBOT大豆</td>
                    <td>905.25</td>
                    <td>3.25</td>
                    <td>CBOT大豆</td>
                    <td>905.25</td>
                    <td>3.25</td>
                    <td>CBOT大豆</td>
                    <td>905.25</td>
                    <td>3.25</td>	
                    <td>CBOT大豆</td>
                    <td>905.25</td>
                    <td>3.25</td>	
                </tr>
            </table>
        <!--展示表格1 End-->
        </div>
                <br />
        <!--展示表格2-->
        <div style="width: 64%; float:left; border:0px solid red; margin-right:10px;" >
            <table class="datagrid2">
            	<!--表格2标题-->
                <tr>
                    <th colspan="11">
                        <font style="font-size:25px; color:#800040">仓&nbsp;&nbsp;&nbsp;&nbsp;位</font>
                    </th>
                </tr>
                <tr>
                    <th>交易号</th>
                    <th>股票名称</th>
                    <th>股票代码</th>
                    <th>下单时间</th>
                    <th>买价</th>
                    <th>持仓量</th>
                    <th>手续费</th>
                    <th>过夜费</th>
                    <th>盈亏</th>
                    <th>使用资金</th>
                    <th>仓位类型</th>
                </tr>
                
                <tr>
                    <td>CBOT大豆</td>
                    <td>905.25</td>
                    <td>CBOT大豆</td>
                    <td>905.25</td>
                    <td>3.25</td>
                    <td>CBOT大豆</td>
                    <td>905.25</td>
                    <td>3.25</td>
                    <td>CBOT大豆</td>
                    <td>905.25</td>
                    <td>3.25</td>	
                </tr>
                <tr>
                    <td>CBOT大豆</td>
                    <td>905.25</td>
                    <td>3.25</td>
                    <td>CBOT大豆</td>
                    <td>905.25</td>
                    <td>3.25</td>
                    <td>CBOT大豆</td>
                    <td>905.25</td>
                    <td>CBOT大豆</td>
                    <td>905.25</td>
                    <td>3.25</td>	
                </tr>
                <tr>
                    <td>CBOT大豆</td>
                    <td>905.25</td>
                    <td>3.25</td>
                    <td>CBOT大豆</td>
                    <td>905.25</td>
                    <td>3.25</td>
                    <td>CBOT大豆</td>
                    <td>905.25</td>
                    <td>3.25</td>	
                    <td>CBOT大豆</td>
                    <td>905.25</td>
                </tr>
                <tr>
                    <td>CBOT大豆</td>
                    <td>905.25</td>
                    <td>3.25</td>
                    <td>CBOT大豆</td>
                    <td>905.25</td>
                    <td>3.25</td>
                    <td>905.25</td>
                    <td>3.25</td>	
                    <td>CBOT大豆</td>
                    <td>905.25</td>
                    <td>3.25</td>	
                </tr>
            </table>
        <!--展示表格2 End-->
        </div>
        <!--操作Div-->
        <div style="width:30%; float:left;">
            <table class="datagrid2">
                <form name="indexForm" action="" >
                    <!--操作表格标题-->
                    <tr>
                        <th colspan="4">
                            <font style="font-size:25px; color:#800040">操 作</font>
                        </th>
                    </tr>
                    <tr>
                        <td>股票代码：</td>
                        <td><input type="text" style="width:50px;" /></td>
                        <td>训练点数：</td>
                        <td><label>2813.76</label></td>
                    </tr>
                    <tr>
                        <td>股票名称：</td>
                        <td><label>五粮液</label></td>
                        <td>可用资金：</td>
                        <td><label>25325.64</label></td>
                    </tr>
                    <tr>
                        <td>手数：</td>
                        <td><input type="text" style="width:50px;" /></td>
                        <td>最大手数：</td>
                        <td><label>123456</label></td>
                    </tr>
                    <tr>
                    	<th colspan="4">
                        	<input type="button" style="width:55px;" value="开仓(多)" />
                            <input type="button" style="width:30px;" value="平仓" />
                            <input type="button" style="width:55px;" value="开仓(空)" />
                        	<input type="button" style="width:60px;" value="所有股票" />
                            <input type="button" style="width:60px;" value="交割清单" />
                        </th>
                    </tr>
                </form>
            </table>
        </div>
	<!--控制总层End-->
	</div>
</body>
</html>